<template>
  <AppPage class="bg-[#f4f4f4]" article-class="pt-12" header-class="bg-[#fff] ">
    <template #center>出行信息</template>
    <div class="px-15 pt-15 pb-68">

    </div>
    <div class="w-full px-15 box-border fixed bottom-0 left-0 z-10 bg-white py-15">
      <div class="w-full  box-border" @click="toBegin">
        <nut-button :block="true" type="info">开始办理</nut-button>
      </div>
    </div>
  </AppPage>
</template>

<script setup>
import { onMounted, reactive } from 'vue'
import { productDetailQuery, productBriefQuery, } from '@/api/visa'
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { visaType, identityTYpe } from '@/utils/type/visa.js'
const route = useRoute()
const router = useRouter()
let productDetail = reactive({})
let identityTYpeList = ref([])
let selectidentityTYpe = ref('')
let submitProductMaterial = reactive({})
let product_material = reactive({})
let positionColumns = ref([])
let positionValue = ref('')
let positionText = ref('')
const getProductDetailFun = async () => {
  let product_id = route.query.product_id
  const result = await productDetailQuery(product_id)
  let data = result.data
  for (const key in data) {
    if (Object.hasOwnProperty.call(data, key)) {
      productDetail[key] = data[key];
      if (key === 'handle_process') {
        productDetail[key] = JSON.parse(data[key]);
      }
    }
  }
  product_material = data.product_material
  let _positionColumns = []
  product_material.forEach((item) => {
    identityTYpeList.value.push({ value: item.identity_id, label: identityTYpe[item.identity_id] })
    _positionColumns.push({ value: item.identity_id, text: identityTYpe[item.identity_id] })
    let material = item.material
    if (material) {
      for (const key in material) {
        if (Object.hasOwnProperty.call(material, key)) {
          const element = material[key];
          if (Array.isArray(element)) {
            element.forEach(_item => {
              if (_item.attention) {
                if (_item.attention.includes('\n')) {
                  _item.attention = _item.attention.split('\n')
                } else {
                  _item.attention = [_item.attention]
                }
              }
            })
          }
        }
      }
    }
  })
  selectidentityTYpe.value = product_material[0].identity_id
  positionValue.value = product_material[0].identity_id
  positionText.value = identityTYpe[product_material[0].identity_id]
  positionColumns.value = _positionColumns
  submitProductMaterial = product_material[0]
}

// 选择不同职业 
const confirm = (value) => {
  submitProductMaterial = product_material[value]
}

let productList = ref([])
const getProductListFun = async (provinceCode) => {
  let params = {
    country_name: route.query.country_name,
    province_code: provinceCode,
    page_size: 1000,
    page: 1
  }
  const result = await productBriefQuery(params)
  if (+result.code === 200) {
    productList.value = result.data.data
  }
}
let selectedCountryIndex = ref(0)
const goSelectVisa = async (item, index) => {
  selectedCountryIndex.value = index
  let provinceCode = item.key
  await getProductListFun(provinceCode)
}

const toBegin = () => {
  const params = {
    product_id: route.query.product_id,
    product_id: route.query.product_id,
    product_id: route.query.product_id,
    product_id: route.query.product_id,
    product_id: route.query.product_id,
  }
  router.push({ path: '/createOrder', query: params })
}
onMounted(async () => {
  await getProductDetailFun()
})
</script>
<style scoped>
.card-tabs .n-tabs-nav--bar-type {
  padding-left: 4px;
}
</style>
<style lang="scss" scoped>
.city {
  line-height: 32px;
  border: 1px solid #ddd;
}
.city.active {
  line-height: 32px;
  border: 1px solid #f00;
}
</style>